<!-- 车辆列表 -->
<template>
  <div class="dashboard-container vehicle customer-list-box">
    <div class="app-container">
      <el-card class="search-card-box" shadow="never">
        <el-form ref="searchFromData" :model="searchFromData" label-width="80px">
          <el-row :gutter="60">
            <el-col :span="8">
              <el-form-item label="车辆牌号:" style="margin-bottom: 10px" label-width="80px">
                <el-input v-model="searchFromData.vehicleNumber" placeholder="请输入货物类型名称" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车辆型号:" style="margin-bottom: 10px" label-width="80px">
                <el-input v-model="searchFromData.vehicleTypeId" placeholder="请输入运输车型名称" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车型编码:" style="margin-bottom: 10px" label-width="80px">
                <el-input v-model="searchFromData.vehicleCode" placeholder="请输入运输车型名称" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="品牌logo:" style="margin-bottom: 0px" label-width="80px">
                <el-input v-model="searchFromData.vehicleLogo" placeholder="请输入运输车型名称" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button type="warning" @click="handleFilter">搜索</el-button>
              <el-button plain class="reset-btn" @click="resetForm('searchFromData')">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card element-loading-text="加载中" class="table-card-box"
        :class="{'table-empty-box': !dataList || dataList.length <= 0}"
        shadow="never" style="margin-top: 20px">
        <el-button class="customer-add-btn" @click="handleVehicleInfo()">+ 新增车辆</el-button>
        <el-table v-if="dataList && dataList.length > 0" ref="multipleTable" 
          :data="dataList" fit style="width: 100%" stripe :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
          @selection-change="handleSelectionChange">
          <el-table-column type="index" label="序号" width="60"/>
          <el-table-column prop="id" align="center" label="系统编号" min-width="150"></el-table-column>
          <el-table-column prop="vehicleNumber" align="center" label="车辆牌号" min-width="150"></el-table-column>
          <el-table-column align="center" label="车辆型号" width="160px">
            <template slot-scope="scope">
              <span> {{ scope.row.vehicleTypeId }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="vehicleCode" align="center" label="车型编码" min-width="150"></el-table-column>
          <el-table-column prop="vehicleLogo" align="center" label="品牌logo" min-width="150"></el-table-column>
          <el-table-column prop="remark" align="center" label="说明" min-width="150"></el-table-column>
          <el-table-column align="center" fixed="right" label="操作" width="160" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-link type="success" :underline="false" @click="handleVehicleDetail(scope.row.id)">详情</el-link>
              <el-divider direction="vertical"/>
              <el-link type="primary" :underline="false" @click="handleVehicleInfo(scope.row.id)">编辑</el-link>
              <el-divider direction="vertical"/>
              <el-link type="danger" :underline="false" @click="handleDelete(scope.row.id)">删除</el-link>             
            </template>
          </el-table-column>
        </el-table>
        <empty v-else src="../../assets/empty.png" desc="这里空空如也~"></empty>
        <!-- end -->
        <!-- 分页 -->
        <div v-show="dataList && dataList.length > 0" class="pagination">
          <div class="pages">
            <el-pagination
              :current-page="Number(searchFromData.pageNum)"
              :total="Number(total)"
              :page-size="Number(searchFromData.pageSize)"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
        <!-- end -->
        <vehicleInfoDialog ref="vehicleInfomation" class="add-form-dialog" :title-info="titleInfo" :form-base="formData"/>
      </el-card>
    </div>
    <!-- 删除弹框重绘 -->
    <el-dialog class="customer-dialog" title="删除确认" :visible.sync="dialogVisible" width="394px" :before-close="handleClose">
      <img class="warn-img" src="@/assets/warn.png" alt=""/>
      <p>确认删除？</p>
      <span slot="footer" class="dialog-footer">
        <el-button class="confirm-btn" type="primary" @click="sumbitDelte">确定</el-button>
        <el-button class="cancel-btn" @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { truckList, truckTypeDetail,truckDel } from '@/api/transit'
import vehicleInfoDialog from './components/vehicle-add'
export default {
    name: 'Vehicle',
    components: {
      vehicleInfoDialog
    },
    data() {
      return {
        dialogVisible: false,
        dataList: [],
        total: null,
        searchFromData: {
          pageNum: 1,
          pageSize: 10,
          vehicleNumber: '',
          vehicleTypeId: '',
          vehicleCode: '',
          vehicleLogo:''
        },
        formData: {
          id:'',
          vehicleNumber: '',
          vehicleTypeId: '',
          vehicleTypeName: '',
          vehicleCode: '',
          vehicleLogo: '',
          remark: ''
        },
        titleInfo: {
          pageTitle: '',
          text: ''
        },
      }
    },
    created(){
      this.getList()
    },
    methods: {
      // 删除弹框重绘方法
      handleClose() {
        this.dialogVisible = false
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },      
      // 获取车辆分页数据
      getList() {
        truckList(this.searchFromData).then((response) => {
          // 获取数据给dataList
          this.dataList = response.data.records
          // 获取总条数
          this.total = response.data.total
        })
      },
      // 重置
      resetForm() {
        this.searchFromData.pageNum = 1
        this.searchFromData.pageSize = 10
        this.searchFromData.vehicleNumber = ''
        this.searchFromData.vehicleTypeId = ''
        this.searchFromData.vehicleCode = ''
        this.searchFromData.vehicleLogo = ''
        this.getList()
      },
      // 搜索信息
      handleFilter() {
        this.searchFromData.pageNum = 1
        this.getList(this.searchFromData)
      },
      // 每页显示信息条数
      handleSizeChange(val) {
        this.searchFromData.pageSize = val
        if (this.searchFromData.pageNum === 1) {
          this.getList(this.searchFromData)
        }
      },
      // 进入某一页
      handleCurrentChange(val) {
        this.searchFromData.pageNum = val
        this.getList()
      },
      // 查看车辆详情
      handleVehicleDetail(id) {
        this.$router.push({
          path: '/transit/vehicle-info',
          query: { id: id }
        })
      },
      // 新增车辆
      handleVehicleInfo(id) {
        if (id) {
          this.$refs.vehicleInfomation.dialogFormV()
          this.titleInfo.text = '编辑车辆'
          this.hanldeEditForm(id)
        } else {
          this.$refs.vehicleInfomation.dialogFormV()
          this.titleInfo.text = '新增车辆'
          this.formData.id = ''
          this.formData.vehicleNumber = ''
          this.formData.vehicleTypeId = ''
          this.formData.vehicleTypeName = ''
          this.formData.vehicleCode = ''
          this.formData.vehicleLogo = ''
          this.formData.remark = ''
        }
      },
      // 编辑线路
      async hanldeEditForm(id) {
        const { data: res } = await truckTypeDetail(id)
        this.formData.id = res.id
        this.formData.vehicleNumber = res.vehicleNumber
        this.formData.vehicleTypeId = res.vehicleTypeId
        this.formData.vehicleTypeName = res.vehicleTypeName
        this.formData.vehicleCode = res.vehicleCode
        this.formData.vehicleLogo = res.vehicleLogo
        this.formData.remark = res.remark
      },
      // 删除货物类型
      handleDelete(id) {
        this.$confirm('确定要删除车辆吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.sumbitDelte(id)
        })
      },
      // 确认删除
      sumbitDelte(id) {
        truckDel(id).then((res) => {
          if (Number(res.code) === 200) {
            this.$message.success('删除成功')
            this.getList()
            this.dialogVisible = false
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    }
}
</script>

<style>
    .startconfirm{
      width: 481px;
    }
    .startconfirm .el-message-box__header{
      padding-bottom: 4px;
    }
    .startconfirm .el-message-box__container{
      margin-bottom: 15px;
    }
    .confirm .el-message-box__status.el-icon-warning{
      left: 70px;
    }
    .confirm.el-message-box__title{
      font-size: 16px;
    }
    .confirm .el-message-box__message p {
      color: #F92D2D;
      margin-top: 5px;
    }
    .confirm .el-message-box__btns{
      text-align: center;
      margin-top: 10px;
    }
</style>
